<template>
	<view class="body">
		<scroll-view scroll-y="true" class="scroll-y">
			<view class="comlum_box">
				<view v-for="(item,index) in list" :key="index" class="item">
					<view class="hiden_box">
						<view class="left">
							<image :src="item.category_image" mode="aspectFill" class="icon"></image>
							<view class="title">
								{{item.shop_name || '-'}}
							</view>
						</view>
					</view>
					<view class="deatil_box">
						<view class="rows">
							<view class="left">
								来源
							</view>
							<view class="right">
								{{item.cancel_form_str || '-'}}
							</view>
						</view>
						<view class="rows">
							<view class="left">
								类型
							</view>
							<view class="right">
								{{item.form}}
							</view>
						</view>
						<view class="rows">
							<view class="left">
								核销码
							</view>
							<view class="right">
								{{item.cancel_code || '-'}}
							</view>
						</view>
						<view class="rows">
							<view class="left">
								核销时间
							</view>
							<view class="right">
								{{item.cancel_time || '-'}}
							</view>
						</view>
					</view>
				</view>
				<view class="empty">
					
				</view>
			</view>
		</scroll-view>
		<navButtons :current="query.page" :total="totalPages" @change="handlePageChange"></navButtons>
	</view>
</template>

<script>
	import{
		verify_record
	} from '@/api/user.js'
	export default {
		data() {
			return {
				query:{
					page: 1
				},
				totalPages: null,
				list: []
			}
		},
		onLoad() {
			this.List()
		},
		methods: {
			List() {
				this.isLoading = true
				verify_record(this.query).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.totalPages = res.data.all_page
						this.query.page = res.data.page
						this.list = res.data.list
			
					}
				}).finally(()=>{
					this.isLoading = false
				})
			},
			handlePageChange(newPage) {
				this.query.page = newPage
				// 执行数据加载逻辑 
				this.List()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #e9e9e9;
	}
	
	.scroll-y{
		width: 100%;
		height: 90vh;
		.comlum_box{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.empty{
			height: 50rpx;
		}
	}
	.body {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 24rpx;
		.item {
			width: 702rpx;
			height: 368rpx;
			background: #ffffff;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 24rpx;
			.hiden_box {
				margin-top: 24rpx;
				width: 100%;
				padding-bottom: 22rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 1rpx solid #e9e9e9;
				.left {
					display: flex;
					flex-direction: row;
					flex: 1;
					padding-left: 24rpx;

					.icon {
						width: 114rpx;
						height: 36rpx;
						margin-right: 12rpx;
					}

					.title {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #333333;
					}
				}
			}
			.deatil_box{
				display: flex;
				flex-direction: column;
				width: 100%;
				padding: 0 24rpx;
				padding-top: 24rpx;
				.rows{
					margin-bottom: 24rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 100%;
					.left{
						flex: 1;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;
						color: #333333;
					}
					.right{
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: right;
						color: #333333;
					}
				}
			}
		}
	}
</style>